<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0
    }

    ul {
        list-style: none
    }

    body {
        background-color: #333;
    }

    .nav {
        width: 800px;
        height: 42px;
        margin: 100px auto;
        background: url(images/rss.png) right center no-repeat;
        background-color: #fff;
        border-radius: 10px;
        position: relative;
    }

    .nav li {
        width: 83px;
        height: 42px;
        text-align: center;
        line-height: 42px;
        float: left;
        cursor: pointer;
    }

    .nav span {
        position: absolute;
        top: 0;
        left: 0;
        width: 83px;
        height: 42px;
        background: url(images/cloud.gif) no-repeat;
    }

    ul {
        position: relative;
    }
    </style>
        
</head>
<body>
    <div class="nav">
        <span id="cloud"></span>
        <ul id="navBar">
            <li>北京校区</li>
            <li>上海校区</li>
            <li>广州校区</li>
            <li>深圳校区</li>
            <li>武汉校区</li>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>招贤纳士</li>
        </ul>
    </div>
              
    <script>
    function animation(element,target){
        clearInterval(element.timer);
        element.timer = setInterval(function(){
            var current = element.offsetLeft;
            var step = (target-current)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            current+=step;
            element.style.left=current+'px';
            if(current == target){
                clearInterval(element.timer)
            }
        },20)
    }

    var cloud = document.getElementById('cloud');
    var navBar = document.getElementById('navBar');
    var list = navBar.children;
    for(var i=0;i<list.length;i++){
        list[i].onmouseover=function(){
            animation(cloud,this.offsetLeft)
        }
        var address = 0;
        list[i].onclick=function(){
            address = this.offsetLeft
        }
        list[i].onmouseout=function(){
            animation(cloud,address)
        }
    }
    
    
    </script>
</body>
</html>